<template>
  <div class="container">
    <el-card class="box-card header-tags">
      <div>
        <span class="tags-font-weight">标签名称</span>
        <el-input size="small" class="input-width" v-model="tagsInput" placeholder="请输入内容"></el-input>
        <span class="tags-font-weight tags-righs">状态</span>

        <!-- Select选择器 -->
        <el-select class="select-right" size="small" v-model="selectValue" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <!-- 级联选择器 -->

        <el-button size="small" @click="deleteInoutSelect">清除</el-button>
        <el-button size="small" @click="inquireForm" type="primary">搜索</el-button>

        <!-- 添加标签 -->
        <el-button size="small" @click="addCatalogueList" type="success" icon="el-icon-edit" class="right-float">新增技巧</el-button>
        <!-- 添加标签 -->
      </div>

      <!-- 警示 -->
      <el-alert class="alert-top-buttom" type="info" :closable="false" show-icon>
        {{ `数据一共${this.counts}条` }}
      </el-alert>
      <!-- 警示 -->

      <!-- 内容区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80"> </el-table-column>
        <el-table-column prop="title" width="400" label="文章标题">
          <template slot-scope="scope">

            <span>{{ scope.row.title }}</span> &nbsp;&nbsp;&nbsp;
            <i class="el-icon-film pointer" @click="openPlay(scope.row.videoURL)" v-if="scope.row.videoURL" style="color: blue; font-size: 16px"></i>
            <!-- <div class="mask" v-if="videoState" @click="closePlay"></div> -->
            <!-- //弹窗 -->
            <div class="videomasks" v-if="videoState">
              <el-button type="info" icon="el-icon-close" circle class="closeVideo" @click="closePlay"></el-button>
              <!-- //视频：h5的视频播放video -->
              <video :src="MVvideoURL" autoplay></video>
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读量"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入日期">
          <template slot-scope="scope">
            {{ scope.row.createTime | myFilters }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <el-link @click="browseData(scope.row)" class="link-magin-rigin" type="primary">预览</el-link>
            <el-link @click="tagsStateShange(scope.row)" :underline="false" type="primary">{{ scope.row.state == 1 ? '禁止' : '启动' }}</el-link>
            <el-link @click="getAmendData(scope.row)" :underline="false" :disabled="scope.row.state == 1 ? true : false" :class="['link-magin', scope.row.state == 0 ? 'blue' : '']">修改</el-link>
            <el-link @click="deleteOpenList(scope.row)" :underline="false" :disabled="scope.row.state == 1 ? true : false" :class="[scope.row.state == 0 ? 'blue' : '']">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 内容区域 -->
      <!-- 分页区域 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(getList.page)"
            :total="Number(counts)"
            :page-size="Number(getList.pagesize)"
            :page-sizes="[5, 10, 20, 50]"
            layout="sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
      <!-- 分页区域 -->

      <!-- 添加模板 -->
      <sarticles-add ref="child" @addGetArticles="getticles" />

      <!-- 预览弹层 -->
      <el-dialog title="预览文章" :visible.sync="overDialogVisible" width="800px">
        <h2>{{ previewdata.title }}</h2>
        <p>
          <span style="margin-left: 10px">{{ previewdata.createTime | myFilters }}</span>
          <span style="margin-left: 10px">超级管理员</span>
          <i class="el-icon-view" style="margin: 0 10px"></i>
          {{ previewdata.visits }}
        </p>
        <div class="alert" v-html="previewdata.articleBody"></div>
      </el-dialog>

      <!-- 修改弹出框 -->
      <el-dialog title="修改目录" :visible.sync="dialogVisible" width="800px">
        <div>
          <span>文章标题：</span>
          <el-input size="medium" class="amend-width" v-model="amendtitle" placeholder="请输入内容"></el-input>
        </div>
        <div class="div-quill">
          <span>文章内容：</span>
          <quill-editor v-model="amendBody" class="quill-editor-size" :options="editorOption" />
        </div>
        <div style="margin-top: 20px">
          <span>视频地址：</span>
          <el-input size="medium" class="amend-width" v-model="videoURL" placeholder="请输入内容"></el-input>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="amendData">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, update, changeState, remove } from '@/api/hmmm/articles'
import sarticlesAdd from '../components/articles-add'
import { parseTime } from '@/utils/index'

// 导入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    sarticlesAdd,
    quillEditor
  },
  filters: {
    myFilters: function (time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      primary: 'primary',
      tagsInput: '', // input 双向绑定数据
      options: [{ // 级联数据
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      selectValue: null, // 级联选中项
      counts: 0, // 总条数
      tableData: [], // 标签列表数据
      getList: { // 列表配置参数
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },

      currentPage: 1, // 分页第几页
      dialogVisible: false, // 修改对话框

      amendtitle: '', // 修改标题
      amendBody: '', // 正文
      MVvideoURL: '', // 视频地址
      amendId: null,
      videoURL: '',

      // 预览
      overDialogVisible: false,
      previewdata: {},

      videoState: false, // 播放视频

      editorOption: {
        // 占位配置
        modules: {
          // 配置工具栏
          toolbar: [ // quillEditor的配置项，用来自定义工具栏
            ['bold', 'italic'],
            ['underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      }
    }
  },
  created() {
    this.getticles()
  },
  methods: {
    // 获取标签数据
    async getticles() {
      try {
        const { data } = await list(this.getList)
        this.counts = data.counts
        this.tableData = data.items
        // console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    // 清除表单
    deleteInoutSelect() {
      this.tagsInput = ''
      this.selectValue = null
      this.getList.keyword = ''
      this.getList.state = null
      this.getticles()
    },
    // 搜索表单
    inquireForm() {
      this.getList.state = this.selectValue
      this.getList.keyword = this.tagsInput
      this.getticles()
    },
    // 修改数据
    async amendData() {
      try {
        await update({
          id: this.amendId,
          title: this.amendtitle,
          articleBody: this.amendBody,
          videoURL: this.videoURL
        })
        this.dialogVisible = false
        this.$message.success('修改成功')
      } catch (err) {
        this.$message.error('错了哦')
      }
    },
    // 状态切换
    async tagsStateShange(row) {
      try {
        if (row.state) {
          row.state = 0
        } else {
          row.state = 1
        }
        await changeState({
          id: row.id,
          state: row.state
        })
        this.$message.success('修改成功')
      } catch (err) {
        this.$message.error('错了哦')
      }
    },
    // 删除列表数据
    deleteOpenList(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({
          id: row.id
        })
        this.getticles()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改表单
    getAmendData(row) {
      // console.log(row)
      this.amendtitle = row.title
      this.amendBody = row.articleBody
      this.videoURL = row.videoURL
      this.amendId = row.id
      this.dialogVisible = true
    },
    // 预览
    browseData(row) {
      this.previewdata = row
      this.overDialogVisible = true
    },
    // 点击图标观看、关闭视频
    openPlay(videos) {
      this.videoState = true
      this.MVvideoURL = videos
    },
    closePlay () {
      this.videoState = false
    },
    addCatalogueList() {
      this.$refs.child.onClickLeft()
    },

    // 分页
    handleSizeChange(val) {
      this.getList.pagesize = val
      this.getticles()
    },
    handleCurrentChange(val) {
      this.getList.page = val
      this.getticles()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  .header-tags {
    margin: 10px;
  }
  .tags-font-weight {
    font-weight: 700;
    font-size: 14px;
    margin: 0 10px;
    color: #606266;
  }
  .input-width {
    width: 200px;
  }
  .tags-righs {
    margin-left: 50px;
  }
  .select-right {
    margin-right: 10px;
  }
  .right-float {
    float: right;
  }
  .alert-top-buttom {
    margin: 18px 0;
  }
  /deep/ .el-alert__icon.is-big {
    font-size: 16px !important;
    width: 15px;
  }
  /deep/ .el-alert__description {
    margin: 0 !important;
  }
  .link-magin {
    margin: 0 15px;
  }
  .blue {
    color: #409eff;
  }
  .pagination {
    height: 30px;
    margin-top: 20px;
  }
  .pages {
    float: right;
  }
  .amend-width {
    width: 680px;
    margin: 0 0 20px 10px;
  }
  .link-magin-rigin {
    margin-right: 15px;
  }
  /deep/ .el-dialog__footer {
    text-align: right !important;
  }
  .quill-editor-size {
    float: right;
    width: 680px;
  }
  .div-quill {
    overflow: hidden;
  }
  .alert {
    background-color: #f5f5f5;
    padding: 10px;
    border-top: dashed 1px #cccccc;
  }
  .alert /deep/ img {
    width: 100%;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0.6;
  }
  .videomasks{
    max-width: 1200px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 20;
    transform: translate(-50%,-50%);
  }
  .videomasks video{
    position: relative;
    width: 800px;
    height: 500px;
  }
  .videomasks .closeVideo {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -65px;
    left: 50%;
    background-color: rgba(75, 71, 71, 0.096);
    box-shadow: 0 0 3px 1px #ccc;
    margin-left: -25px;
  }
  .pointer {
    cursor: pointer
  }
}
</style>
